<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
  // 常量路由：全部用户都可以访问到的路由
  let constRoute = [
    {
      // 登录
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      name: 'login',
      meta: {
        title: '登录', // 菜单的标题
        isShow: false, // 代表路由标题在菜单中是否隐藏 false: 隐藏 true: 不隐藏
        icon: 'User',
      },
    },
    {
      // 登录成功以后展示数据的路由
      path: '/',
      component: () => import('@/layout/index'),
      name: 'layout',
      redirect: '/home',
      meta: {
        title: '',
        isShow: true,
        icon: 'HomeFilled',
      },
      children: [
        {
          path: '/home',
          component: () => import('@/views/home/index.vue'),
          meta: {
            title: '首页',
            isShow: true,
            icon: 'HomeFilled',
          },
        },
      ],
    },
    {
      path: '/screen',
      component: () => import('@/views/screen/index'),
      name: 'screen',
      meta: {
        title: '数据大屏',
        isShow: true,
        icon: 'Platform',
      },
    },
    {
      // 404
      path: '/404',
      component: () => import('@/views/404/index.vue'),
      name: '404',
      meta: {
        title: '404',
        isShow: false,
        icon: 'FolderDelete',
      },
    },
  ]

  // 异步路由
  let asyncRoute = [
  {
    path: '/acl',
    component: () => import('@/layout/index'),
    name: 'Acl',
    meta: {
      title: '权限管理',
      isShow: true,
      icon: 'Lock',
    },
    children: [
      {
        path: '/acl/user',
        component: () => import('@/views/acl/user'),
        name: 'User',
        meta: {
          title: '用户管理',
          isShow: true,
          icon: 'User',
        },
      },
      {
        path: '/acl/role',
        component: () => import('@/views/acl/role/index'),
        name: 'Role',
        meta: {
          title: '角色管理',
          isShow: true,
          icon: 'UserFilled',
        },
      },
      {
        path: '/acl/permission',
        component: () => import('@/views/acl/permission/index.vue'),
        name: 'Permission',
        meta: {
          title: '菜单管理',
          isShow: true,
          icon: 'Monitor',
        },
      },
    ],
  },
  {
    path: '/product',
    component: () => import('@/layout/index.vue'),
    name: 'Product',
    meta: {
      title: '商品管理',
      isShow: true,
      icon: 'Goods',
    },
    children: [
      {
        path: '/product/trademark',
        component: () => import('@/views/product/tradeMark'),
        name: 'TradeMark',
        meta: {
          title: '品牌管理',
          isShow: true,
          icon: 'ShoppingCart',
        },
      },
      {
        path: '/product/attr',
        component: () => import('@/views/product/attr'),
        name: 'Attr',
        meta: {
          title: '属性管理',
          isShow: true,
          icon: 'Operation',
        },
      },
      {
        path: '/product/spu',
        component: () => import('@/views/product/spu'),
        name: 'SPU',
        meta: {
          title: 'SPU管理',
          isShow: true,
          icon: 'Menu',
        },
      },
      {
        path: '/product/sku',
        component: () => import('@/views/product/sku'),
        name: 'SKU',
        meta: {
          title: 'SKU管理',
          isShow: true,
          icon: 'Menu',
        },
      },
    ],
  },
]

// 任意路由
let anyRoute = [
  {
    // 任意路由，上面都未匹配上则匹配该路由
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
    meta: {
      title: '任意路由',
      isShow: false,
      icon: 'FolderDelete',
    },
  },
]

// 账号硅谷333：routes['Product','Trademark','Sku']
let guigu333 = ['Product','Trademark','Sku']
function filterAsyncRoute(asyncRoute, routes) {
  return asyncRoute.filter(item => {
    if(routes.includes(item.name)) {
      if(item.children && item.children > 0) {
        item.children = filterAsyncRoute(item.children, routes)
      }
      return true
    }
  })
}
let guigu333Result = filterAsyncRoute(asyncRoute, guigu333)

console.log([...constRoute,...guigu333Result,...anyRoute]);

// 第二个登录：对比的全部异步路由发生变化
let guigu444 = ['Product', 'Spu']
console.log(asyncRoute);
</script>